<template>
	<view>
		<view class="order">
			<view class="top-box">
				<!-- <van-tabs ellipsis="{{false}}" sticky color="#1677FF" active="{{ active }}" bind:change="onChange">
					<van-tab v-for="{{tabList}}" v-key="index" title="{{item}}"></van-tab>
				</van-tabs> -->
				<u-tabs
				       :list="tabList"
					   keyName="name"
				       lineWidth="40"
				       lineColor="#1677FF"
						@click="onChange"
				       :activeStyle="{
				           color: '#444445',
				           fontWeight: 'bold',
				       }"
				       :inactiveStyle="{
				           color: '#A4A9B7',
				           transform: 'scale(1)'
				       }"
				       itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;margin-top:12rpx;"
				   >
				   </u-tabs>
			</view>
			<view class="main-box">
				<scroll-view class="scroll-box z-padding-t-24" :scroll-y="true" :show-scrollbar="false" :enhanced="true" bindscrolltolower="more">
					<block v-for="(item,index) in list" :key="item.id">
						<order :info="item" @orderTap="orderTap" @orderBtnTap="orderBtnTap"></order>
					</block>
					<!-- <van-empty description="暂无订单" v-if="finish && list.length === 0" /> -->
					<!-- <u-empty v-if="finish && list.length === 0" mode="" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty> -->
					<u-empty v-if="finish && list.length === 0" text="列表为空" mode="list"></u-empty>
					<login v-if="!token" />
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
import order from "@/component/order/order.vue"
export default {
	components:{
		order
	},
	data() {
		return {
			unread: 1,
			tabList:[
				{name:'接单池'},
				{name:'待接单'},
				{name:'进行中'},
				{name:'已完成'},
				{name:'售后订单'}
			],
			orderState: 0,
			list: [],
			finish: false,
			loading: false,
			page: 1,
			active: 0,
			token: uni.getStorageSync('token')
		};
	},
	onShow() {
		this.token = uni.getStorageSync('token');
		this.reload();
	},
	methods: {
		orderBtnTap(e) {
			if (e.type == 1) {
				this.http.get(
					'order/skillaccept',
					{
						id: e.info.id
					},
					false,
					false
				)
					.then((res) => {
						this.util.toast('抢单成功');
						this.reload();
						setTimeout((res) => {
							this.util.skip('/pages/orderDetail/orderDetail?id=' + e.info.id);
						}, 1000);
					})
					.catch((err) => {
						let data = err.data;
						if (data.code === 2) {
							this.util.toast(data.msg);
						} else if (data.code === 0) {
							this.util.toast(data.data);
						}
					});
			} else if (e.type == 2) {
				this.http.get(
					'order/skillaccept',
					{
						id: e.info.id
					},
					false,
					false
				)
					.then((res) => {
						this.util.toast('接单成功');
						this.reload();
						setTimeout((res) => {
							this.util.skip('/pages/orderDetail/orderDetail?id=' + e.info.id);
						}, 1000);
					})
					.catch((err) => {
						let data = err.data;
						if (data.code === 2) {
							if (e.info.shop_id) {
								this.util.toast(data.msg);
							} else {
								this.util.toast(data.msg);
								setTimeout(() => {
									this.util.skip('/service/earnestMoney/earnestMoney');
								}, 1000);
							}
						} else if (data.code === 0) {
							this.util.toast(data.data);
						}
					});
			}
		},
		orderTap(e) {
			console.log(e)
			this.util.skip('/pages/orderDetail/orderDetail?id=' + e.id);
		},
		onChange(event) {
			console.log(event,'11111')
			this.active = event.index
			this.reload();
		},
		reload() {
			this.list = [],
			this.page = 1,
			this.finish = false
			this.getList();
		},
		more() {
			this.page = ++this.page
			this.getList();
		},
		getList() {
			if (!uni.getStorageSync('token')) return;
			if (this.finish) {
				return;
			}
			if (this.loading) {
				return;
			}
			this.loading = true
			let data = {
				page: this.page
			};
			if (this.active === 0) {
				data['is_pool'] = 1;
			} else if (this.active === 1) {
				data['status'] = 1;
			} else if (this.active === 2) {
				data['not_finish'] = 1;
			} else if (this.active === 3) {
				data['finish'] = 1;
			} else if (this.active === 4) {
				data['in_service'] = 1;
			}
			this.http.get('order/skillorderlist', data)
				.then((res) => {
					if (res.data.length === 0) {
						this.finish = true
					}
					let arr = this.list.concat(res.data);
					this.list = arr
				})
				.finally((res) => {
					this.loading = false
				});
		}
	}
};
</script>

<style>
page {
	background-color: #edf1f4;
}

.order {
	height: 100vh;
	/* #ifdef H5 */
	height: calc(100vh - 90rpx);
	/* #endif */
	display: flex;
	flex-direction: column;
}
.main-box {
	flex: 1;
	overflow: hidden;
}

.scroll-box {
	height: 100%;
	box-sizing: border-box;
}
</style>
